﻿<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Require html</title>
        <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
		<link href="css/font-awesome.min.css" rel="stylesheet"/>
 
        <script id="main" data-key="webapp" data-router data-main="scripts/main.require" src="scripts/require.js"></script>            
		<script type="text/javascript">
			//data-key值对应要调用的controller，service的名字前缀
			var require_key = document.getElementById('main').getAttribute('data-key');
			//如果用不到router那么不写data-router就可以了
			var require_router = document.getElementById('main').getAttribute('data-router');
			//webappConfig 要传入到controller，service里用到的值
			var webappConfig = {
				data: {
					isShowToolTip: true
				}
			};     
		</script>
		<style type="text/css">
		</style>

    </head>
    <body>       
        <div class="container" ng-controller="webappController">
            <div class="row">  
				This page info: <span ng-bind-html="info | limitCharacter : 22"></span>
			</div>
			<p/><p/><br/><br/>
			<div is-null="isShowToolTip" tool-tip tool-tip-title="this is tool tip" style="width:200px;">This is test directive function.</div>
			<div ui-view style="background-color:rgba(255, 0, 0, 0.26);"></div>
			<div ui-view="main" style="background-color:rgba(0, 0, 255, 0.31);"></div>
			<div ui-view="main.type" style="background-color:rgba(0, 255, 173, 0.31)"></div>
		</div>


<style type="text/css">
/**
 * Demo styles
 * Not needed for tooltips to work
 */

/* `border-box`... ALL THE THINGS! */
 
*,
*:before,
*:after { box-sizing: inherit; }

header,
.demo,
.demo p { margin: 4em 0; text-align: center; }

/**
 * Tooltip Styles
 */

/* Base styles for the element that has a tooltip */
[data-tooltip], .tooltip {
 position: relative;
 cursor: pointer;
}
/* Base styles for the entire tooltip */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
	position: absolute;
	visibility: hidden;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	opacity: 0;
	-webkit-transition: opacity 0.2s ease-in-out,  visibility 0.2s ease-in-out,  -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-moz-transition:    opacity 0.2s ease-in-out,  visibility 0.2s ease-in-out,  -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	transition:         opacity 0.2s ease-in-out,  visibility 0.2s ease-in-out,  transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform:    translate3d(0, 0, 0);
	transform:         translate3d(0, 0, 0);
	pointer-events: none;
}
/* Show the entire tooltip on hover and focus */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after {
	visibility: visible;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	opacity: 1;
}
/* Base styles for the tooltip's directional arrow */
.tooltip:before,
[data-tooltip]:before {
	z-index: 1001;
	border: 6px solid transparent;
	background: transparent;
	content: "";
}
/* Base styles for the tooltip's content area */
.tooltip:after,
[data-tooltip]:after {
	z-index: 1000;
	padding:12px 16px 8px;
	width: 160px;
	background-color: #FFEBA7;
	/* background-color: hsla(46, 100%, 83%, 0.9); */
	color: #1d1d1d;
	content: attr(data-tooltip);
	font-size: 14px;
	line-height: 20px;
	border-radius: 8px;
}
/* Directions */

/* Top (default) */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after,
.tooltip-top:before,
.tooltip-top:after {
	bottom: 100%;
	left: 50%;
}
[data-tooltip]:before,
.tooltip:before,
.tooltip-top:before {
	margin-left: -6px;
	margin-bottom: -12px;
	border-top-color: #FFEBA7;
	/* border-top-color: hsla(46, 100%, 83%, 0.9); */
}
/* Horizontally align top/bottom tooltips */
[data-tooltip]:after,
.tooltip:after,
.tooltip-top:after {
	margin-left: -80px;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after,
.tooltip-top:hover:before,
.tooltip-top:hover:after,
.tooltip-top:focus:before,
.tooltip-top:focus:after {
	-webkit-transform: translateY(-12px);
	-moz-transform:    translateY(-12px);
	transform:         translateY(-12px);
}
/* Left */
.tooltip-left:before,
.tooltip-left:after {
	right: 100%;
	bottom: 50%;
	left: auto;
}
.tooltip-left:before {
	margin-left: 0;
	margin-right: -12px;
	margin-bottom: 0;
	border-top-color: transparent;
	border-left-color: #FFEBA7;
	/* border-left-color: hsla(46, 100%, 83%, 0.9); */
}
.tooltip-left:hover:before,
.tooltip-left:hover:after,
.tooltip-left:focus:before,
.tooltip-left:focus:after {
	-webkit-transform: translateX(-12px);
	-moz-transform:    translateX(-12px);
	transform:         translateX(-12px);
}
/* Bottom */
.tooltip-bottom:before,
.tooltip-bottom:after {
	top: 100%;
	bottom: auto;
	left: 50%;
}
.tooltip-bottom:before {
	margin-top: -12px;
	margin-bottom: 0;
	border-top-color: transparent;
	border-bottom-color: #FFEBA7;
	/* border-bottom-color: hsla(46, 100%, 83%, 0.9); */
}
.tooltip-bottom:hover:before,
.tooltip-bottom:hover:after,
.tooltip-bottom:focus:before,
.tooltip-bottom:focus:after {
	-webkit-transform: translateY(12px);
	-moz-transform:    translateY(12px);
	transform:         translateY(12px);
}
/* Right */
.tooltip-right:before,
.tooltip-right:after {
	bottom: 50%;
	left: 100%;
}
.tooltip-right:before {
	margin-bottom: 0;
	margin-left: -12px;
	border-top-color: transparent;
	border-right-color: #FFEBA7;
	/* border-right-color: hsla(46, 100%, 83%, 0.9); */
}
.tooltip-right:hover:before,
.tooltip-right:hover:after,
.tooltip-right:focus:before,
.tooltip-right:focus:after {
	-webkit-transform: translateX(12px);
	-moz-transform:    translateX(12px);
	transform:         translateX(12px);
}
/* Move directional arrows down a bit for left/right tooltips */
.tooltip-left:before,
.tooltip-right:before {
	top: 3px;
}
/* Vertically center tooltip content for left/right tooltips */
.tooltip-left:after,
.tooltip-right:after {
	margin-left: 0;
	margin-bottom: -16px;
	text-align:left;
}
</style>
</body>
</html>
